<template>
	<view class="page" style="background: #fff !important;">
		<!-- 搜索 -->

		<view class="search-head" style="margin-top: -60rpx;">
				<view class="search" style="margin: 0 32rpx;">
					<text class="iconfont ">&#xe60c;</text>
					<input type="text" v-model="keyword" placeholder="请输入商品名称" @blur="search" />
					<!-- <text class="iconfont" @tap.stop="scanCode">&#xe60d;</text> -->
				</view>
			
		</view>


		<!-- 商品列表 -->
		<view class="goods-data">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption" :top="0">
				<view class="nogoods" v-if="total ==0">
					<view>

						<view class="img">
							<image :src="OSS_HOST+'img/no-goods.png'" mode=""></image>
						</view>

					</view>

				</view>
				<!-- <view class="goods-list">
					<view :class="isList?'list-view':'list-li'" v-for="(item,index) in goodsList" @tap="onGoodsList(item.id,index)" :key="index">
						<view class="pictrue thumb">
							<image :src="item.cover_image" mode="heightFix"></image>
						</view>
				
							<view class="title-tag">
								<view class="tag">
									<text v-if="item.is_goods === 1">处方药</text>
									{{item.name}}
								</view>
							</view>
						<view class="price-info">
							<view class="price">
								<text class="selling-price">￥{{item.price}}</text>
								<text class="original-price">￥{{item.cost}}</text>
								<text class="sales">已售{{item.sale_count||100}}件</text>
							</view>
						</view>
					</view>
				</view> -->
				<view class="goods-list">
					<view :class="isList?'list-view':'list-li'" v-for="(item,index) in goodsList"
						@tap="onGoodsList(item.id,index)" :key="index">
						<view class="thumb">
							<image :src="item.cover_image" mode="heightFix" lazy_load="true"></image>
						</view>
						<view class="item">
							<view class="title">
								<view class="two-omit1" style=" ">{{item.name}}</view>
							</view>
							<view class="Tn">
								{{item.factory || '无'}}
							</view>
							<view class="itemP">
								<view class="">
									规格:{{item.norms_name || '无'}}
								</view>
								<view class="">
									中包装:{{item.multiple || '无'}}
								</view>
							</view>
							<view class="itemP">
								<view class="">
									库存:{{item.number || 0}}
								</view>
								<view class="">
									效期:{{item.use_expire_at || '无'}}
								</view>
							</view>
							<view class="price">
								<view class="retail-price">
									<!-- <text class="min">￥</text> -->
									<text class="max">￥{{item.price}}<text v-if="item.saleunit">/{{item.saleunit}}</text></text>
									<view class="tag" v-if="item.is_goods === 1">
										<text>抢购价</text>
									</view>
								</view>
								<!-- 	<view class="vip-price">
									<text class="min">￥</text>
									<text class="max">{{item.cost}}</text>
								</view> -->
								<!-- 	<view class="sale-count">
									<text class="min">已售</text>
									<text>{{item.sale_count}}件</text>
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<!-- 抽屉 -->
		<view class="cu-modal drawer-modal justify-end" :class="{'show':isDrawer}" @click="isDrawer = false">
			<view class="cu-dialog basis-lg" @click.stop="isDrawer = true">
				<view class="serve">
					<view class="title">
						<text>品牌</text>
					</view>
					<view class="serve-list">
						<view :class="brand_id==item.id?'list action':'list' " v-for="item in brandList"
							@tap.stop="checkBrand(item.id)">
							<text>{{item.name}}</text>
						</view>
						<!-- <view class="list">
							<text>活动</text>
						</view>
						<view class="list">
							<text>活动</text>
						</view> -->
					</view>
				</view>
				<view class="price-screen">
					<view class="title">
						<text>价格区间</text>
					</view>
					<view class="price-section">
						<!-- digit 带小数点 -->
						<input type="number" placeholder="最低价" v-model="min_price">
						<text></text>
						<input type="number" placeholder="最高价" v-model="max_price">
					</view>
				</view>
				<view class="operation-btn">
					<view class="btn creal" @click.stop="reset">
						<text>重置</text>
					</view>
					<view class="btn action" @tap.stop="confirm">
						<text>确认筛选</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		oss_host
	} from '@/config/config.js';
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {},
				OSS_HOST: oss_host,
				// 列表视图切换
				isList: false,
				// 筛选弹窗
				isScreen: false,
				// 筛选切换
				screenShow: '',
				// 抽屉
				isDrawer: false,
				priceSorter: '',
				sale_count: '',
				keyword: '',
				property_id: '',
				page: 0,
				lastPage: 0,
				total: 0,
				goodsList: [

				],
				brandList: [],
				brand_id: '',
				min_price: '',
				max_price: '',
				title: ''
			}
		},
		onLoad(e) {
			console.log(e)
			this.keyword = decodeURIComponent(e.keyword || '');
			this.property_id = e.property_id
			this.title = e.name
			// this.getList()
		},
		onShow(){
			this.page = 0
			this.getList()
		},

		methods: {
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				this.mescroll.endSuccess();
			},
			onReachBottom() {
				


				this.getList();

			},

			/**
			 * 返回点击
			 */
			onBack() {
				uni.navigateBack();
			},
			/**
			 * 综合点击
			 * @param {Number} type
			 */
			onSynthesize(type) {
				this.screenShow = type;
				// this.isScreen = !this.isScreen;

				switch (type) {
					case 0:
						this.sale_count = this.sale_count == "desc" ? 'asc' : 'desc';
						this.priceSorter = '';
						break;
					case 1:
						this.priceSorter = this.priceSorter == "desc" ? 'asc' : 'desc';
						this.sale_count = '';
						break;

				}
				this.page = 0
				this.getList()
				// console.log('price:',this.priceSorter)
			},
			search() {
				this.page = 0
				this.getList()
			},
			/**
			 * 
			 * */
			getList() {
				console.log(this.lastPage,this.page )
				const _this = this
				if (_this.keyword) {
					this.property_id = ''
				}

				var opt = {
					url: '/user/getCollectList',
					data: {
						// property_id: this.property_id || '',
						// lat: this.latitude || 22.81194,
						// lng: this.longitude || 108.393005,
						page: ++_this.page || 1 ,
						name: _this.keyword,
						// sale_count: _this.sale_count, //销量排序，
						// price: _this.priceSorter, // 价格排序
						// brand_id: _this.brand_id, //品牌id 4级分类
						// max_price: _this.max_price,
						// min_price: _this.min_price,

						// adv_channel:this.adv_channel
					},
					success: function(res) {

						if (res.status == 1) {
							// 分页 上拉加载
							if (res.data.list.length==0) {
							
								// uni.showToast({
								// 	icon: 'none',
								// 	title: '没有更多数据'
								// });
								// _this.goodsList = []
								
							}
							
							let result = res.data

							_this.total = result.total || 0
							// 品牌
							_this.brandList = result.brandList
			
							if(_this.page>1){
								_this.goodsList = _this.goodsList.concat(result.list)
							}else if(_this.page==1){
								_this.goodsList = result.list  
							}
							
						}
					}
				};
				this.$service.GetApi(opt) //网络 
			},
			//品牌选择 
			checkBrand(id) {
				console.log(id)
				this.brand_id = id;
			},
			reset() {
				this.brand_id = ''
				this.min_price = ''
				this.max_price = ''
			},
			confirm() {
				this.isDrawer = false
				this.page = 0
				this.getList()
			},
			// 扫码
			scanCode() {
				let _this = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log(res)
						//二维码
						if (res.scanType == 'QR_CODE') {
							const code = res.result



						} else {
							// 条码
							const code = res.result
							_this.$refer.setVilit('/pages/GoodsDetails/GoodsDetails')
							let callback = function(url) {
								_this.$refs.popupvLogin.open()
							}
							var data = {
								code: code
							}
							_this.$refer.toUrl(callback, data)
						}

					}
				});
			},
			/**
			 * 商品列表点击
			 */
			onGoodsList(id, index) {
				// uni.navigateTo({
				// 	url: '/pages/GoodsDetails/GoodsDetails',
				// 	animationType: 'zoom-fade-out',
				// 	animationDuration: 200
				// })
				let _this = this

				_this.$refer.setVilit('/pages/GoodsDetails/GoodsDetails')
				let callback = function(url) {
					_this.$refs.popupvLogin.open()
				}
				let data = {
					id: id,

				}
				_this.$refer.toUrl(callback, data)
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'collection.scss';
</style>